<template>
	<view class="wrap">
		<view class="header">
			<view class="content">
				<view class="status" v-if="obj.order_state == 2">
					<u--image width="34rpx" height="auto" mode="widthFix" src="/static/orderStatus/finish.png"></u--image>
					<text class="text">已完成</text>
				</view>
				<view class="status" v-else-if="obj.order_state == 3">
					<u--image width="34rpx" height="auto" mode="widthFix" src="/static/orderStatus/cancel.png"></u--image>
					<text class="text">已取消</text>
				</view>
				<view class="status" v-else-if="obj.pay_state == 0 || obj.last_pay_state == 0">
					<u--image width="34rpx" height="auto" mode="widthFix" src="/static/orderStatus/wait.png"></u--image>
					<text class="text">{{obj.pay_state==1?'首款已支付':'待付款'}}</text>
				</view>
				<view class="status" v-else-if="obj.order_state == 1 && obj.allot_state == 1">
					<u--image width="34rpx" height="auto" mode="widthFix" src="/static/orderStatus/execute.png"></u--image>
					<text class="text">进行中</text>
				</view>

				<view class="desc" v-if="obj.pay_state == 0 || obj.last_pay_state == 0">您的订单还未付款，快去完成支付吧！</view>
				<view class="desc" v-if="obj.order_state == 1 && obj.allot_state == 1">工程正在施工中，请耐心等候！</view>
				<view class="desc" v-if="obj.order_state == 2">工程项目已完成，如有疑问请联系客服</view>
				<view class="desc" v-if="obj.order_state == 3">订单已取消，请重新购买</view>
			</view>
		</view>
		<view class="address">
			<image style="width: 50rpx" mode="widthFix" src="/static/orderConfirm/location.png"></image>
			<view class="info">
				<view class="text">{{ obj.address }}</view>
				<view class="name">{{ obj.sname }} {{ obj.telphone }}</view>
			</view>
		</view>
		<view class="cellBox">
			<view class="cell">
				<view class="service">
					<view class="title">
						<view class="name">装修服务</view>
						<view class="desc">{{ obj.lv_name }}</view>
					</view>
					<view class="content">
						<view class="left">
							<view class="picture">
								<image style="width: 94rpx" mode="widthFix" :src="obj.imgList && obj.imgList[0] && obj.imgList[0]"></image>
							</view>
							<view class="project">
								<view class="name">{{ obj.pro_name }}</view>
								<view class="desc">服务项目：{{ obj.service_items }}</view>
							</view>
						</view>
						<view class="price">
							￥
							<span>{{ obj.total_fee }}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="cell" style="align-items: flex-start">
				<view class="title">订单号</view>
				<view class="remarkBox">
					<view class="desc">{{ obj.order_no }}</view>
				</view>
			</view>
			<view class="cell" style="align-items: flex-start">
				<view class="title">订单时间</view>
				<view class="remarkBox">
					<view class="desc">{{ obj.create_time }}</view>
				</view>
			</view>
			<view class="cell">
				<view class="title">支付说明</view>
				<view class="payBox">
					<view class="text">装修服务费用分为两个阶段</view>
					<view class="text" :class="{ active: obj.pay_state == 1 }">
						<span>阶段一：￥{{ obj.first_fee }}</span>
						(总金额80%)
					</view>
					<view class="text" :class="{ active: obj.last_pay_state == 1 }">
						<span>阶段一：￥{{ obj.last_fee }}</span>
						(总金额20%)
					</view>
				</view>
			</view>
			<view class="cell" style="align-items: flex-start">
				<view class="title">订单备注</view>
				<view class="remarkBox">
					<view class="desc">{{ obj.remark }}</view>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="obj.order_state != 3 || obj.order_state != 2">
			<!-- <view class="price">
				阶段一：
				<span>￥{{ obj.first_fee }}</span>
			</view> -->
			<view class="btn btn1" v-if="cancelOrderBtn(obj)" @click.native.stop="cancelOrder(obj)">取消订单</view>
			<view class="btn btn3" :class="{'btn5':!obj.v_state,'btn4':obj.v_state===2}" v-if="logOrderBtn(obj)" @click.native.stop="jumpLog(obj)">装修日志</view>
			<view class="btn btn3" v-if="payOrderBtn(obj)" @click.native.stop="payOrder(obj)">去支付</view>
			<!-- <u-button type="primary" style="width: 204rpx;" shape="circle" @click="submitOrder" text="取消订单" color="#21B579"></u-button>
			<u-button type="primary"  style="width: 204rpx;" shape="circle" @click="submitOrder" text="装修日记" color="#21B579"></u-button> -->
		</view>
	</view>
</template>

<script>
import { wxPay } from '../../utils/public';
import { cancelOrderBtn, payOrderBtn, logOrderBtn } from '../../utils/orderStatus.js';
export default {
	data() {
		return {
			obj: {},

			userInfo: {}
		};
	},
	onLoad(options) {
		// console.log(getApp().globalData.userInfo)
		this.getUserInfo();
		if (options.id) {
			this.$nextTick(() => {
				this.getOrderDetais(options.id);
			});
		} else {
			this.$nextTick(() => {
				this.getOrderDetais('20240104095839414969');
			});
		}
	},
	methods: {
		// 获取订单详情
		getOrderDetais(id) {
			this.$api.post('/fit/getOrderDetail', { userId: this.userInfo.id, outTradeNo: id }).then((res) => {
				console.log(res);
				this.obj = res.data;
			});
		},
		// 装修日志
		jumpLog(item) {
			if(item.v_state){
				uni.navigateTo({
					url: `/pages/serviceDiary/serviceDiary?id=${this.item.order_no}`
				});
			}else{
				uni.showToast({
					title:'暂无装修日志',
					icon:"none"
				})
			}
			
		},
		// 取消订单
		cancelOrder(item) {
			let that = this;
			// console.log(that.userId);
			uni.showModal({
				title: '提示',
				content: '你确定取消这个订单吗？',
				success: function (res) {
					if (res.confirm) {
						that.$api.post('/fit/cancelOrder', { outTradeNo: item.order_no, userId: that.userInfo.id }).then((res) => {});
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 支付订单
		payOrder(obj) {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userInfo = res.data;
					let data = {
						openid: res.data.openid,
						ownership:obj.pay_state==1? 'last':'first',
						source: 'pro_order',
						userId: res.data.id,
						outTradeNo: obj.order_no
					};
					that.$api.post('/fit/payment', data).then((response) => {
						wxPay(response.data, { outTradeNo: obj.order_no, ownership: '第二阶段', price: obj.last_fee });
					});
					console.log(data);
				}
			});
		},
		//取消订单按钮判断
		cancelOrderBtn(item) {
			return cancelOrderBtn(item);
		},
		//支付按钮按钮判断
		payOrderBtn(item) {
			return payOrderBtn(item);
		},
		//装修日志按钮判断
		logOrderBtn(item) {
			return logOrderBtn(item);
		},
		// 获取用户信息数据
		getUserInfo() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userInfo = res.data;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	.header {
		// position: absolute;
		position: relative;
		height: 375rpx;
		width: 110%;
		margin-left: -5%;
		background: #21b579;
		position: relative;
		border-bottom-right-radius: 30%;
		border-bottom-left-radius: 30%;
		color: #fff;
		overflow-x: hidden;
		.content {
			width: 100%;
			height: 100%;
			position: relative;
			// background-color: #E8C8A2;
			// margin: 0 auto;
			text-align: center;
			// padding-top: 60rpx;
			.status {
				padding-top: 60rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.text {
					margin-left: 16rpx;
				}
			}
			.desc {
				margin-top: 20rpx;
			}

			// display: flex;
			// flex-direction: column;
			// align-items: center;
			// justify-content: center;
			// margin-left: 10%;
		}
	}
	.address {
		position: absolute;
		width: 82%;
		padding: 32rpx;
		// height: 152rpx;
		top: 246rpx;
		background: #fff;
		color: #666;
		left: 5%;
		font-size: 30rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: flex-start;
		align-content: flex-start;
		.info {
			margin-left: 20rpx;
			font-weight: bold;
			color: #333333;
			font-size: 28rpx;
			.name {
				color: #999999;
				font-size: 28rpx;
			}
		}
	}
	.cellBox {
		margin-top: 30rpx;
		padding: 32rpx;
	}
	.cell {
		// margin-top: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		font-size: 24rpx;
		.addressBox {
			display: flex;
			justify-content: flex-start;
			width: 80%;
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			.name {
				font-weight: 400;
				color: #999999;
				font-size: 24rpx;
			}
		}
		.service {
			width: 100%;
			font-size: 24rpx;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				color: #333;
				.desc {
					color: #f55726;
				}
			}
			.content {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				.left {
					display: flex;
					justify-content: flex-start;
					.picture {
						width: 130rpx;
						height: 130rpx;
						background: #f8f9fa;
						border-radius: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.project {
						width: 65%;
						margin-left: 28rpx;
						.name {
							color: #333;
							font-size: 24rpx;
							font-weight: 500;
						}
						.desc {
							color: #666666;
							font-size: 22rpx;
						}
					}
				}
				.price {
					color: #f55726;
					font-size: 22rpx;
					span {
						font-weight: 500;
						font-size: 32rpx;
					}
				}
			}
		}
		.payBox {
			color: #666666;
			font-size: 24rpx;
			text-align: right;
			span {
				color: #f55726;
			}
			.active {
				text-decoration: line-through;
				text-decoration-color: #f55726;
			}
		}
		.title {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}
		.remarkBox {
			text-align: right;
			width: 70%;
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			.desc {
				margin-right: 20rpx;
				color: #999999;
			}
		}
		.agreement {
			display: flex;
			.desc {
				margin-right: 20rpx;
				color: #999999;
			}
		}
	}
	.bottom {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 32rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
		.btn {
			width: 204rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 35rpx;
			font-size: 26rpx;
			// margin-left: 36rpx;
		}

		.btn1 {
			background: #f8f9fa;
			color: #333;
		}
		.btn2 {
			background: #666666;
			color: #fff;
			margin-left: 32rpx;
		}
		.btn3 {
			background: #21b579;
			color: #fff;
			margin-left: 32rpx;
		}
		.btn4 {
			background: #f50;
			color: #fff;
			margin-left: 32rpx;
		}
		
		.price {
			font-size: 22rpx;
			span {
				font-size: 32rpx;
				font-weight: bold;
				color: #f55726;
			}
		}
	}
}
</style>
